<template>
  <div class="home-wrap">
    <div class="home-list">
      <h4 class="home-tj list-rank">我的关注</h4>
      <div class="home-List-box">
          <InfoList :info-list="attentionUserInfo.data"></InfoList>
<!--          <InfoItem :info-list="attentionUserInfo.data"></InfoItem>-->
          <el-pagination v-model:current-page="attentionUserInfo.current"
                         @update:current-page="currentChange"
                         background layout="prev, pager, next"
                         style="position: absolute;right: 160px"
                         :page-count="attentionUserInfo.pages"></el-pagination>

      </div>
    </div>
  </div>
</template>

<script>
import {ref} from "vue";
import InfoItem from "@/components/InfoItem.vue";
import InfoList from "../components/InfoList.vue"
export default {
  name: "AttentionUser",
    components: {InfoItem,InfoList},
  page: ref(2),
    created() {
      this.getAttentionUserInfo(1)
    },
    methods:{
        currentChange(e){
          this.getAttentionUserInfo(e)
        },
        getAttentionUserInfo(current){
          this.$loading();
            this.$requestCenter.getAttentionUserInfo(current).then((e)=>{
                this.attentionUserInfo = e.data
            })
          this.$loading().close();
        }
    },
    setup(){
      return{
          attentionUserInfo:ref()
      }
    }
}
</script>

<style lang="less" scoped>
  .home-wrap{
    padding-top: 74px;
    width: 90%;
    margin: 0 auto;
  }
  .home-List-box{
    padding: 20px 0 30px 0;
  }
  .home-list{
    padding: 20px 0;
    margin: 20px 0;
  }
  a{
    text-decoration: none;
  }
  .pages{
    float: right !important;
    padding: 10px 55px 0 0 !important;
  }
</style>

<style>
.el-pagination.is-background .el-pager li:not(.disabled) {
  background-color: #de7285;
  color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #de7285;
  color: black;
}

</style>